<template>
  <div class="cate-container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类参数</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="card-box">
      <el-card class="box-card">
        <el-button type="primary"
                   @click="addfl">添加分类</el-button>
        <el-table :data="tableData"
                  border
                  row-key="cat_id"
                  :tree-props="{children: 'children'}">
          style="width: 100%">
          <el-table-column label="#"
                           width="55"
                           type="index">
            <template slot-scope="scope">
              <span>{{scope.row.index}} </span>
            </template>
          </el-table-column>
          <el-table-column prop="cat_name"
                           label="分类名称"
                           width="250">
          </el-table-column>
          <el-table-column label="是否有效"
                           width="250">
            <template slot-scope="scope">

              <i :class="scope.row.cat_deleted?'':'el-icon-success'"></i>
            </template>
          </el-table-column>
          <el-table-column prop="address"
                           label="排序"
                           width="250">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.cat_level===0">一级</el-tag>
              <el-tag type="success"
                      v-else-if="scope.row.cat_level===1">二级</el-tag>
              <el-tag type="warning"
                      v-else>三级</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="address"
                           label="操作"
                           width="250">
            <template slot-scope="scope">
              <el-button size="mini"
                         @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini"
                         type="danger"
                         @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="1"
                       :page-size="10"
                       background
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
        <!-- 添加弹出 -->
        <el-dialog title="添加分类"
                   :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="分类名称"
                          :label-width="formLabelWidth">
              <el-input v-model.trim="form.name"
                        autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="父级分类"
                          :label-width="formLabelWidth">
              <el-cascader v-model="value"
                           :options="tableData1"
                           :props="{checkStrictly: true,value: 'cat_id',
        label: 'cat_name'}"
                           @change="handleChange">
                <template slot-scope="{data}">
                  <span v-if="data.cat_level===0&data.cat_level===1">{{ data.cat_name }}</span>
                </template>
              </el-cascader>
            </el-form-item>
          </el-form>
          <div slot="footer"
               class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary"
                       @click="addparams">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 编辑 -->
        <el-dialog title="编辑分类"
                   :visible.sync="dialogFormVisible1">
          <el-form :model="form1">
            <el-form-item label="编辑分类名称"
                          :label-width="formLabelWidth">
              <el-input v-model="form1.name"
                        autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer"
               class="dialog-footer">
            <el-button @click="dialogFormVisible1=false">取 消</el-button>
            <el-button type="primary"
                       @click="changeparams">确 定</el-button>
          </div>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getGoods, addparams, delFl, editFl } from '@/api/Param.js'
export default {
  name: 'Categories',
  data () {
    return {
      value: [],
      currentPage: 10,
      pagenum: 1,
      tableData: [],
      tableData1: [],
      total: 10,
      dialogFormVisible: false,
      form: {
        name: ''
      },
      dialogFormVisible1: false,
      form1: {
        name: '',
        id: 0
      },
      formLabelWidth: '120px'
    }
  },
  created () {
    this.getGoodList()
  },
  methods: {
    async getGoodList () {
      const { data } = await getGoods({
        pagenum: this.pagenum,
        pagesize: this.currentPage
      })
      this.total = data.data.total
      this.tableData = data.data.result
      this.tableData.forEach((item, index) => {
        item.index = index + 1
      })
      // console.log(this.tableData)
      // console.log(data.data)
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      this.pagenum = val
      this.getGoodList()
      console.log(`当前页: ${val}`)
    },
    // 修改
    handleEdit (index, row) {
      this.dialogFormVisible1 = true
      this.form1.name = row.cat_name
      this.form1.id = row.cat_id
      console.log(index, row)
    },
    // 删除
    async handleDelete (index, row) {
      console.log(index, row)
      await delFl(row.cat_id)
      this.getGoodList()
    },
    handleChange (val) {
      console.log(val)
    },
    async addparams () {
      if (this.value.length && this.form.name === '') return
      let pid = 0
      if (this.value.length !== 0) {
        pid = this.value[this.value.length - 1]
      }
      const res = await addparams({
        cat_pid: pid,
        cat_name: this.form.name,
        cat_level: this.value.length
      })
      this.dialogFormVisible = false
      console.log(res)
      this.getGoodList()
    },
    // 分类编辑
    async changeparams () {
      await editFl(this.form1.id, this.form1.name)
      this.dialogFormVisible1 = false
      this.getGoodList()
    },
    async addfl () {
      this.dialogFormVisible = true
      const { data } = await getGoods({
        type: 2
      })
      console.log(data)
      this.tableData1 = data.data
    }
  }
}
</script>

<style scoped lang='less'>
.cate-container {
  background: #eaedf1;
  width: 100%;
  height: 100%;
  padding: 20px;
  .card-box {
    padding: 20px;
    width: 100%;
    /deep/.el-table--scrollable-x .el-table__body-wrapper {
      overflow: unset;
    }
    /deep/.el-icon-arrow-right:before {
      content: "\e7a0";
    }
    .el-icon-success:before {
      content: "\e79c";
      color: green;
    }
  }
}
</style>
